<template>
	<view class="wanl-goods">
		<!-- 导航条 -->
		<view class="cu-custom" :style="{ height: wanlsys.height + 'px' }">
			<view class="cu-bar fixed" :style="{ height: wanlsys.height + 'px', paddingTop: wanlsys.top + 'px' }">
				<view class="action" @tap="$wanlshop.back(1)"><text class="wlIcon-fanhui1"></text></view>
				<view class="search-form round">
					<text class="wlIcon-sousuo1 text-bold"></text>
					<swiper class="search-swiper placeholder" vertical autoplay circular interval="3000">
						<swiper-item @tap="productSearch('')">搜索商品、类目</swiper-item>
					</swiper>
				</view>
				<view class="action">
					<!-- #ifndef MP -->
					<text class="wlIcon-fenxiangcopy" @tap="showModal('share')"></text>
					<text class="wlIcon-liebiaomoshi" @tap="showModal('menu')"></text>
					<text class="wlIcon-31gouwuche" @tap="toCart"></text>
					<!-- #endif -->
				</view>
				
				<view class="bar-bg solid-bottom" :style="{ top: wanlsys.height + 'px', opacity: headerOpacity }">
					<scroll-view scroll-x class="nav">
						<view class="flex justify-around text-center">
							<view class="cu-item " :class="selectAnchor==index?'text-orange cur':''" v-for="(anchor, index) in anchorlist" :key="anchor.name" @tap="toAnchor(index)">
								{{ anchor.name }}
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- 直播 -->
				<view class="wan-live" v-if="goodsData.isLive" @tap="onLive(goodsData.isLive.id)">
					<view class="tag shadow-blur" :style="{top:wanlsys.height + 47 + 'px' }">
						<view class="text-center">
							<view class="live">
								<view class="wanLive-icon"> </view>
							</view>
							<text class="text-white margin-lr-xs"> 在直播 </text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 商品主图轮播 -->
		<view class="swiper-box" id="swiper">
			<swiper circular="true" autoplay="true" @change="swiperChange">
				<swiper-item v-for="(swiper, index) in goodsData.images" :key="index">
					<image :src="$wanlshop.oss(swiper, 400, 0)" mode="aspectFill"  @click="clickBannerItem(swiper,index)"/>
				</swiper-item>
			</swiper>
			<view class="indicator">{{ currentSwiper + 1 }}/{{ goodsData.images.length }}</view>
		</view>

    <!-- 标题-->
    <view class="bg-white padding-bj text-xl" style="text-align: center">{{ goodsData.title || '加载中...' }}</view>
    <!--浏览量-->
    <view class="bg-white padding-bj">
      <view style="display: flex;align-items: center;height: 120rpx;background-color: #eee;border-radius: 20rpx">
<!--        <view style="flex: 1;text-align: center" class="text-xl">浏览量: {{goodsData.views}}</view>-->
        <view style="flex: 1;text-align: center">
          <view class="follow wanl-black" v-if="goodsData.follow" @tap="follow">
            <text class="wlIcon-yiguanzhu1 text-red"></text>
            <text class="text-xl margin-left-bj">取消收藏</text>
          </view>
          <view class="follow wanl-black" v-else @tap="follow">
            <text class="wlIcon-gerenguanzhu"></text>
            <text class="text-xl margin-left-bj">收藏</text>
          </view>
        </view>
        <view style="flex: 1;text-align: center" class="text-xl" @tap="showModal('share')">分享</view>
      </view>
    </view>

    <!-- 分隔符 -->
<!--    <wanl-divider width="60%">产品规格</wanl-divider>-->

		<!-- 产品 -->
<!--		<view class="bg-white">-->
<!--			&lt;!&ndash; 普通 &ndash;&gt;-->
<!--			<view class="price margin-bottom-sm padding-lr-bj padding-top-bj align-start">-->
<!--				<view>-->
<!--					<view class="text-price wanl-orange text-xxl margin-right-xs">{{ goodsData.interval_price || '0.00' }}</view>-->
<!--					<view class="text-sm wanl-gray text-dec">-->
<!--						市场价-->
<!--						<text class="text-price margin-left-xs ">{{ goodsData.market_price || 0.0 }}</text>-->
<!--					</view>-->
<!--				</view>-->

<!--			</view>-->
<!--			<view class="title padding-lr-bj padding-bottom-bj">-->
<!--				<view class="name wanl-black text-lg">-->
<!--					<view v-if="goodsData.shop.isself == 1" class="cu-tag radius margin-right-xs sm bg-red">自营</view>-->
<!--					{{ goodsData.title || '加载中...' }}-->
<!--				</view>-->
<!--        <view style="display: flex;flex-direction: row;width: 10%; align-items: center;justify-content: center">-->
<!--          <view class="follow wanl-black" v-if="goodsData.follow" @tap="follow">-->
<!--            <view class="wlIcon-yiguanzhu1 text-red"></view>-->
<!--            <view class="text-xs">取关</view>-->
<!--          </view>-->
<!--          <view class="follow wanl-black" v-else @tap="follow">-->
<!--            <view class="wlIcon-gerenguanzhu"></view>-->
<!--            <view class="text-xs">关注</view>-->
<!--          </view>-->
<!--        </view>-->
<!--				<view class="share" @tap="showModal('share')">-->
<!--					<view class="button wanl-gray-light margin-bottom">-->
<!--						<text class="wlIcon-fenxiangcopy margin-right-xs"></text>-->
<!--						<text class="text-sm">分享</text>-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->

<!--			<view class="block text-min padding-lr padding-bottom-bj">-->
<!--				<view class="wanl-gray">-->
<!--					<text class="wlIcon-weizhi margin-right-xs"></text>-->
<!--					{{ goodsData.shop.city ? goodsData.shop.city.split('/')[1] : '中国' }}-->
<!--				</view>-->
<!--        <view class="wanl-gray">-->
<!--          浏览量：-->
<!--          <text class="margin-left-xs">0</text>-->
<!--        </view>-->
<!--				<view class="wanl-gray">-->
<!--					快递费：-->
<!--					<text class="text-price">{{ goodsData.freight.price }}</text>-->
<!--				</view>-->
<!--				<view class="wanl-gray">-->
<!--					月销-->
<!--					<text class="margin-left-xs">{{ goodsData.sales }}</text>-->
<!--				</view>-->
<!--			</view>-->
<!--		</view>-->
		<!-- 选择商品 -->
<!--		<view class="choice margin-bottom-bj padding-bj text-sm bg-white">-->
<!--			<view class="commodity  margin-bottom-bj" @tap="showModal('option')">-->
<!--				<view class="opt">-->
<!--					<view class="title wanl-gray">选择</view>-->
<!--					<view class="option">-->
<!--						<view class="selected">-->
<!--							<view v-if="canCount">-->
<!--								选择-->
<!--								<text class="margin-lr-xs" v-for="(item, index) in goodsData.spu" :key="item.id">{{ item.name }}</text>-->
<!--							</view>-->
<!--							<view v-else>-->
<!--								已选-->
<!--								<text>{{ selectArr.join(' / ') }}</text>-->
<!--							</view>-->
<!--						</view>-->
<!--						<view class="option-list">-->
<!--							<view v-for="(item, index) in goodsData.spu" :key="item.id">-->
<!--								<text class="cu-tag" v-if="index == 0" v-for="tag in item.item" :key="tag.name">{{ tag.name }}</text>-->
<!--								<text class="cu-tag" v-if="index == 0">更多规格可选</text>-->
<!--							</view>-->
<!--						</view>-->
<!--					</view>-->
<!--				</view>-->
<!--				<view class="text-sm wanl-gray"><text class="wlIcon-fanhui2"></text></view>-->
<!--			</view>-->
<!--			<view class="commodity" @tap="showModal('service')">-->
<!--				<view class="opt">-->
<!--					<view class="title wanl-gray text-sm">服务</view>-->
<!--					<view class="option">-->
<!--						<view class="selected">-->
<!--							<block v-for="(item, index) in goodsData.shop.service_ids" :key="item.id" v-if="index <= 2">-->
<!--								<text class="margin-lr-xs" v-if="index != 0">·</text>-->
<!--								{{ item.name }}-->
<!--							</block>-->
<!--						</view>-->
<!--					</view>-->
<!--				</view>-->
<!--				<view class="text-min wanl-gray"><text class="wlIcon-fanhui2"></text></view>-->
<!--			</view>-->
<!--		</view>-->
		<!-- 产品参数 -->
<!--		<view class="choice margin-bottom-bj padding-bj text-sm bg-white">-->
<!--			<view class="commodity" @tap="showModal('attribute')">-->
<!--				<view class="opt">-->
<!--					<view class="title wanl-gray text-sm">参数</view>-->
<!--					<view class="option">-->
<!--						<view class="selected"><text>品牌、规格等...</text></view>-->
<!--					</view>-->
<!--				</view>-->
<!--				<view class="text-min wanl-gray"><text class="wlIcon-fanhui2"></text></view>-->
<!--			</view>-->
<!--		</view>-->

		<!-- 店铺 -->
		<view class="shop padding-bj solid-bottom bg-white">
			<view class="shopinfo margin-bottom">
				<view class="cu-avatar lg radius-bock" :style="{ backgroundImage: 'url(' + $wanlshop.oss(goodsData.shop.avatar, 52, 52, 2, 'avatar') + ')' }"></view>
				<view class="shopname">
					<view class="text-df">{{ goodsData.shop.shopname }}</view>
					<view class="wanl-gray text-min">{{ goodsData.views }} 人浏览</view>
          <view class="describe text-min" style="display: flex;align-items: center;">
            <view class="cu-tag radius sm margin-right-xs wanl-bg-orange tah-base">企业认证</view>
            <view style="display: flex" class="margin-right-xs">
              <view class="tah-base" :class="goodsData.shop.is_vip === 1 ? 'tah-vip-red-left' : 'tah-vip-gray-left'">{{ goodsData.shop.vip_name }}</view>
              <view class="tah-base" :class="goodsData.shop.is_vip === 1 ? 'tah-vip-red-right' : 'tah-vip-gray-right'">VIP会员</view>
            </view>
          </view>
				</view>
				<view class="bnt">
<!--					<button class="cu-btn round line-orange margin-right-sm" @tap="onShop(goodsData.shop_id, 3)">全部宝贝</button>-->
					<button class="cu-btn round bg-gradual-orange" @tap="onShop(goodsData.shop_id)">进入企业</button>
				</view>
			</view>
		</view>
    <!-- 店铺推荐 -->
<!--    <view class="shop-recom padding-bj bg-white">-->
<!--      <view class="head">-->
<!--        <view class="">店铺推荐</view>-->
<!--        <view class="text-sm wanl-orange" @tap="onShop(goodsData.shop_id, 1)">-->
<!--          查看全部-->
<!--          <text class="wlIcon-fanhui2 margin-left-xs"></text>-->
<!--        </view>-->
<!--      </view>-->
<!--      <view class="recommend margin-bottom-xs">-->
<!--        <view class="item" v-for="(item, index) in goodsData.shop_recommend" :key="item.id" @tap="onGoods(item.id)">-->
<!--          <image :src="$wanlshop.oss(item.image, 125, 120)" mode="aspectFill"></image>-->
<!--          <view class="text-sm margin-tb-xs text-cut">{{ item.title }}</view>-->
<!--          &lt;!&ndash;          <view class="text-price wanl-orange text-df">{{ item.price }}</view>&ndash;&gt;-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->

    <!-- 分隔符 -->
    <wanl-divider width="60%">产品详情</wanl-divider>
    <!-- 产品详情 -->
    <!-- 产品规格 -->
    <view class="wanl-goods-content bg-white padding-bj">
      <u-parse v-if="goodsData.mark" :content="goodsData.mark" @preview="preview" @navigate="navigate"></u-parse>
    </view>
    <view class="wanl-goods-content bg-white" id="details">
      <u-parse v-if="goodsData.content" :content="goodsData.content" @preview="preview" @navigate="navigate"></u-parse>
<!--      <rich-text @tap="clickDetailImage(goodsData.content)" :nodes="goodsData.content"></rich-text>-->
    </view>
		<!-- 分隔符 -->
		<wanl-divider width="60%">推荐产品</wanl-divider>
		<!-- 猜你喜欢 -->
		<view id="recommend">
			<wanl-product :dataList="likeData"/>
		</view>
		<uni-load-more :status="status" :content-text="contentText" />
		<view class="safeAreaBottom"></view>
		<view class="WANL-MODAL text-sm" @touchmove.stop.prevent="moveHandle">
			<!-- 顶部 -->
			<view class="cu-modal top-modal" :class="modalName == 'menu' ? 'show' : ''" @tap="hideModal">
				<view class="wanl-modal-menu cu-dialog" @tap.stop=""><wanl-direct @change="hideModal" /></view>
			</view>
			<!-- 产品参数 -->
			<view class="cu-modal bottom-modal" :class="modalName == 'attribute' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<view class="wanl-modal">
						<view class="head padding-bj">
							<view class="content"><view class="text-lg">产品参数</view></view>
						</view>
						<scroll-view class="scroll-y" scroll-y="true">
							<view class="table solid-bottom">
								<view class="name wanl-gray">品牌</view>
								<view class="value">{{ goodsData.brand.name }}</view>
							</view>
							<view class="table solid-bottom" v-for="(item, index) in goodsData.category_attribute" :key="index">
								<view class="name wanl-gray">{{ index }}</view>
								<view class="value">{{ item }}</view>
							</view>
						</scroll-view>
						<view class="foot padding-lr-bj"><button class="cu-btn bg-gradual-orange round text-bold complete" @tap="hideModal">完成</button></view>
					</view>
				</view>
			</view>
			<!-- 分享 -->
			<view class="cu-modal bottom-modal" :class="modalName == 'share' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<wanl-share 
						:scrollAnimation="scrollAnimation" 
						:shareTitle="goodsData.title" 
						:shareText="goodsData.description" 
						:image="$wanlshop.oss(goodsData.image,50, 50)" 
						:href="common.appConfig.domain + '/pages/product/goods?id='+ goodsData.id +'&QRtype=goods'"
					isReport @change="wanlShare"/>
				</view>
			</view>
			<!-- 服务 -->
			<view class="cu-modal bottom-modal" :class="modalName == 'service' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<view class="wanl-modal">
						<view class="head padding-bj">
							<view class="content"><view class="text-lg">基础服务保障</view></view>
						</view>
						<view class="listbox padding-bj">
							<view v-for="(item, index) in goodsData.shop.service_ids" :key="item.id">
								<view class="name">
									{{ item.name }}
									<text class="wlIcon-fuwuxing"></text>
								</view>
								<view class="description wanl-gray text-min">{{ item.description }}</view>
							</view>
						</view>
						<view class="foot padding-lr-bj"><button class="cu-btn bg-gradual-orange round text-bold complete" @tap="hideModal">完成</button></view>
					</view>
				</view>
			</view>
			<!-- 规格 -->
			<view class="cu-modal bottom-modal" :class="modalName == 'option' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<view class="option wanl-modal">
						<view class="head text-left padding-bj solid-bottom">
							<view
								class="cu-avatar radius-bock margin-right"
								:style="{ backgroundImage: 'url(' + $wanlshop.oss(goodsData.image, 100, 100) + ')' }"
							></view>
							<view class="">
								<view class="text-price wanl-orange text-xl">{{ selectshop.price || goodsData.interval_price }}</view>
								<view class="wanl-gray">
									库存
									<text class="margin-lr-xs">{{ selectshop.stock || 0 }}</text>
									件
								</view>
								<view class="text-sm">
									<view v-if="selectArr.join('')">已选择：{{ selectArr.join(' ') }}</view>
									<view v-else>
										请选择：
										<text class="wanl-gray-light" v-for="(item, index) in goodsData.spu" :key="item.id">
											<block v-if="index != 0">-</block>
											{{ item.name }}
										</text>
									</view>
								</view>
							</view>
							<view class="close wlIcon-31guanbi" @tap="hideModal"></view>
						</view>
						<scroll-view scroll-y="true">
							<view class="opt text-left padding-bj solid-bottom" v-for="(value, spukey) in goodsData.spu" :key="value.id">
								<view class="text-df">{{ value.name }}</view>
								<view class="tag">
									<view
										class="cu-tag text-sm"
										v-for="(item, index) in value.item"
										:key="index"
										:class="[item.ishow ? '' : 'noactive', subIndex[spukey] == index ? 'active' : '']"
										@tap="skuClick(item, spukey, $event, index)"
									>
										{{ item.name }}
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
      <!-- 联系方式 -->
      <view class="cu-modal bottom-modal" :class="modalName == 'contact' ? 'show' : ''" @tap="hideModal">
        <view class="cu-dialog" @tap.stop="">
          <view class="wanl-modal">
            <view class="head padding-bj">
              <view class="content"><view class="text-lg">联系方式</view></view>
            </view>
            <scroll-view class="scroll-y" scroll-y="true">
              <view class="table solid-bottom">
                <view class="name wanl-gray">联系人</view>
                <view class="value">{{ goodsData.shop.contacts }}</view>
              </view>
              <view class="table solid-bottom">
                <view class="name wanl-gray">联系方式</view>
                <view class="value wanl-tag">
                  {{ goodsData.shop.contact_number }}
                  <view class="wlIcon-dianhua wanl-orange padding-left-bj" @tap="$wanlshop.phone(goodsData.shop.contact_number)"></view>
                </view>
              </view>
              <view class="table solid-bottom">
                <view class="name wanl-gray">微信二维码</view>
                <view class="value wanl-tag">
                  <view class="wlIcon-gerenerweima wanl-orange" @tap="previewImage($wanlshop.oss(goodsData.shop.wechat_qrcode))"></view>
                </view>
              </view>
              <view class="table solid-bottom">
                <view class="name wanl-gray">地址</view>
                <view class="value">{{ goodsData.shop.city }}</view>
              </view>
              <view class="table solid-bottom">
                <view class="name wanl-gray">温馨提示</view>
                <view class="value">联系时说在休食帮看到的，会有很多优惠哦</view>
              </view>
            </scroll-view>
            <view class="foot padding-lr-bj"><button class="cu-btn bg-gradual-orange round text-bold complete" @tap="hideModal">完成</button></view>
          </view>
        </view>
      </view>

      <!-- 我要代理 -->
      <view class="cu-modal bottom-modal" :class="modalName == 'distributors' ? 'show' : ''" @tap="hideModal">
        <view class="cu-dialog" @tap.stop="">
          <view class="wanl-modal">
            <view class="head padding-bj">
              <view class="content"><view class="text-lg">我要代理</view></view>
            </view>
            <scroll-view class="scroll-y" scroll-y="true">
              <view class="table solid-bottom">
                <view class="name wanl-gray">姓名</view>
                <view class="value">
                  <input  v-model="distributorsFrom.name" placeholder="请输入姓名" />
                </view>
              </view>
              <view class="table solid-bottom">
                <view class="name wanl-gray">手机号码</view>
                <view class="value">
                  <input v-model="distributorsFrom.phone" placeholder="请输入手机号码" maxlength="11" type="number "/>
                </view>
              </view>
              <view class="table solid-bottom">
                <view class="name wanl-gray">微信号</view>
                <view class="value">
                  <input v-model="distributorsFrom.wechat" placeholder="请输入微信号" />
                </view>
              </view>
              <view class="table solid-bottom">
                <view class="name wanl-gray">公司</view>
                <view class="value">
                  <input v-model="distributorsFrom.company" placeholder="请输入公司" />
                </view>
              </view>
              <view class="table solid-bottom">
                <view class="name wanl-gray">代理区域</view>
                <view class="value" @click="openCityPicker">
                  <lb-picker
                      :list="cityData"
                      :props="cityMap"
                      :level="2"
                      mode="multiSelector"
                      @confirm="cityConfirm"
                      ref="cityPicker">
                    <view>{{ distributorsFrom.area }}</view>
                  </lb-picker>
                </view>
              </view>
              <view class="table solid-bottom">
                <view class="name wanl-gray">留言内容</view>
                <view class="value">
                  <uni-easyinput type="textarea"  v-model="distributorsFrom.leave_word" placeholder="请输入内容"/>
                </view>
              </view>
              <view class="table solid-bottom padding-tb-bj">
                <uni-data-checkbox mode="tag" v-model="distributorsFrom.permission" :localdata="permissionRadio"/>
              </view>
              <view class="table solid-bottom wanl-tag padding-tb-bj" style="justify-content: left">
                <checkbox value="cb" style="transform:scale(0.7)" :checked="distributorsFrom.agree" />
                <text class="padding-lr-bj">我已阅读并同意</text>
                <text class="wanl-orange" @tap="$wanlshop.on('/pages/article/details?id=5&title=用户使用协议')">《网络用户保密协议》</text>
              </view>

            </scroll-view>
            <view class="foot padding-lr-bj"><button class="cu-btn bg-gradual-orange round text-bold complete" @tap="addDistributors">提交留言</button></view>
          </view>
        </view>
      </view>
		</view>
		<!-- 底部 -->
		<view class="wanlian cu-bar tabbar shop solid-top foot">
      <view class="action" style="width: 200rpx" @tap="$wanlshop.on('/pages/wanlshop/index')">
        <view class="wlIcon-31shouye"></view>
        <text style="font-size: 30rpx">首页</text>
      </view>
			<view class="action" style="width: 200rpx" @tap="onShop(goodsData.shop_id)">
				<view class="wlIcon-dianpu1 wanl-orange "></view>
        <text style="font-size: 30rpx">进入企业</text>
			</view>
			<view class="action">

			</view>
			<view class="btn-group">
				<button class="cu-btn bg-gradual-yellow round-left" @tap="showModal('contact')">联系方式</button>
				<button class="cu-btn bg-gradual-orange round-right" @tap="showModal('distributors')">我要代理</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import LbPicker from '@/components/lb-picker'
import uParse from '@/components/u-parse/u-parse.vue'
export default {
  components: { LbPicker, uParse },
	data() {
		return {
      goodsId:'',
			TabCur: 0,
			wanlsys: this.$wanlshop.wanlsys(),
			modalName: null, // 弹出层
			durect: 0, // 角标
			headerOpacity: 0, //不透明度
			currentSwiper: 0, // 轮播图右下角数字
			anchorlist: [{ name: '主图', top: 0 },  { name: '详情', top: 0 }, { name: '推荐', top: 0 }], //导航条锚点
			selectAnchor: 0,
			//产品数据
			goodsData: {
				id: 0,
				category_id: 0,
				shop_id: 0,
				brand_id: 0,
				freight_id: 0,
				title: '',
				image: '',
				images: '',
				flag: '',
				content: '',
				category_attribute: [],
				activity: false,
				price: null,
				interval_price: null,
				market_price: null,
				sales: 0,
				brand: {},
				freight: {
					name: '',
					isdelivery: 1
				},
				payment: 0,
				comment: 0,
				praise: 0,
				moderate: 0,
				negative: 0,
				like: 0,
				views: 0,
				status: '',
				category: {},
				follow: true,
				sku: [],
				spu: [],
				promotion: [],
				coupon: [],
				comment_list: {
					data: [],
					figure: 0,
					tag: []
				},
				shop: {
					city: ''
				},
				shop_recommend: {}
			},
			// 猜你喜欢
			reload: true,
			likeData: [],
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'loading',
			contentText: {
				contentdown: ' ',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			// 商品规格组合
			shopItemInfo: {}, //存放要和选中的值进行匹配的数据
			selectArr: [], //存放被选中的值
			subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
			selectshop: {}, //存放最后选中的商品
			selectNum: 1, //选中数量
			isChoice: '', // 是否从选择进入
			scrollAnimation: 0, //分享滚动
      distributorsFrom:{
        name: '',
        phone: '',
        wechat: '',
        company: '',
        area:'',
        leave_word:'对产品很敢兴趣，请电话联系',
        permission:0,
        agree:true
      },
      permissionRadio: [
        { text: '同意同类厂家查看', value: 0 },
        { text: '同意意向厂家查看', value: 1 }],
      cityData:{},
      cityMap:{
        label: 'name',
        children: 'city'
      },
		};
	},
	onLoad(option) {
    this.goodsId = option.id
    this.getCityData()
		this.loadData(option);
		this.loadlikeData();
		// #ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		this.durect =
			this.$store.state.statistics.notice.notice +
			this.$store.state.statistics.notice.order +
			this.$store.state.statistics.notice.chat +
			this.$store.state.statistics.order.pay +
			this.$store.state.statistics.order.delive +
			this.$store.state.statistics.order.receiving;
	},
	onPageScroll(e) {
		//导航栏渐变
		let tmpY = 150;
		e.scrollTop = e.scrollTop > tmpY ? 150 : e.scrollTop; //如果当前高度大于250则250否则当前高度
		this.headerOpacity = e.scrollTop * (1 / tmpY); //$headerOpacity 赋值当前高度x（1÷250）
	},
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.loadlikeData();
		}
	},
	watch: {
	    selectshop(n, o) {
			if(n.price != o.price){
				// 更新一次优惠券
			}
	    }
	},
	computed: {
		canCount() {
			return this.subIndex.some(item => item === -1);
		},
		...mapState(['cart', 'common'])
	},
	methods: {
    preview(src, e) {
      // do something
    },
    navigate(href, e) {
      // do something
    },
    getCityData(){
      uni.request({
        url: 'https://www.xiushibang.com/uploads/city.json',
        success: (res) => {
          this.cityData = res.data
        }
      });
    },
    clickDetailImage(item){
      const imageLinks = this.extractImageLinks(item);
      uni.previewImage({
        urls: imageLinks,
        longPressActions: {
          itemList: ['发送给朋友', '保存图片', '收藏'],
          success: function(data) {
            console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
          },
          fail: function(err) {
            console.log(err.errMsg);
          }
        }
      });
    },
    extractImageLinks(richText) {
      const imgRegex = /<img[^>]+src="([^">]+)"/gi;
      let matches = [];
      let match;
      while ((match = imgRegex.exec(richText)) !== null) {
        matches.push(match[1]);
      }
      return matches;
    },
    clickBannerItem(item,index) {
      const _that = this
      var bannerlist = this.goodsData.images.map(item => _that.$wanlshop.oss(item, 400, 0))
      uni.previewImage({
        urls: bannerlist,
        current: index,
        longPressActions: {
          itemList: ['发送给朋友', '保存图片', '收藏'],
          success: function(data) {
            console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
          },
          fail: function(err) {
            console.log(err.errMsg);
          }
        }
      });
    },
    addDistributors() {
      if (!this.distributorsFrom.name) {
        this.$wanlshop.msg('请输入您的姓名')
      } else if(!/^1[3-9]\d{9}$/.test(this.distributorsFrom.phone)){
        this.$wanlshop.msg('请输入正确的手机号');
      } else if (!this.distributorsFrom.wechat){
        this.$wanlshop.msg('请输入您的微信号')
      }else if (!this.distributorsFrom.company){
        this.$wanlshop.msg('请输入您的公司')
      }else if (!this.distributorsFrom.area){
        this.$wanlshop.msg('请选择您的地区')
      }else if (!this.distributorsFrom.leave_word){
        this.$wanlshop.msg('请输入您的留言')
      }else if (!this.distributorsFrom.agree){
        this.$wanlshop.msg('请勾选用户协议')
      }else{
        this.distributorsFrom.shop_id = this.goodsData.shop_id
        this.distributorsFrom.goods_id = this.goodsData.id
        this.$api.post({
          url: '/wanlshop/shop/agent',
          data: this.distributorsFrom,
          success: res => {
            this.$wanlshop.msg('提交成功')
            this.hideModal()
          }
        })
      }
    },
		async loadData(option) {
			//加载商品
			this.$api.get({
				url: '/wanlshop/product/goods',
				data: option,
				success: res => {
					//详情正则
					res.content = res.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
						var img = `<img style="display: block; max-width: 100%;" src="${this.$wanlshop.oss(capture, 500, 0)}">`;
						return img;
					});
					// 价格区间
					if (res.sku.length == 0) {
						res.interval_price = res.price;
						res.market_price = res.price;
					}else{
						let price = [],
							market_price = [];
						for (let value of res.sku) {
							price.push(value.price);
							market_price.push(value.market_price);
						}
						let minPrice = Math.min.apply(null, price),
							maxPrice = Math.max.apply(null, price),
							maxMarketPrice = Math.max.apply(null, market_price);
						res.interval_price = minPrice == maxPrice ? minPrice : minPrice + '-' + maxPrice; //区间价格
						res.market_price = Number(maxMarketPrice).toFixed(2); //最大市场价
					}
					this.goodsData = res;
					// 商品规格组合
					this.goodsData.spu.map(item => {
						this.selectArr.push('');
						this.subIndex.push(-1);
					});
					this.checkItem(); //计算sku里面规格形成路径
					this.checkInpath(-1); //传-1是为了不跳过循环
					// 计算锚点高度
					setTimeout(() => {
						this.calcAnchor();
					}, 1000);
				}
			});
		},
		// 滚动底部加载猜你喜欢
		async loadlikeData() {
      const _that = this
			this.$api.get({
				url: `/wanlshop/product/likes?pages=goods&goods_id=${_that.goodsId}`,
				data: {
					page: this.current_page
				},
				success: res => {
					this.likeData = this.reload ? res.data : this.likeData.concat(res.data); //评论数据 追加
					this.current_page = res.current_page; //当前页码
					this.last_page = res.last_page; //总页码
					this.status = 'more';
				}
			});
		},
		// 商品规格组合 选择
		skuClick(value, spukey, event, index) {
			if (value.ishow) {
				if (this.selectArr[spukey] != value.name) {
					this.$set(this.selectArr, spukey, value.name);
					this.$set(this.subIndex, spukey, index);
				} else {
					this.$set(this.selectArr, spukey, '');
					this.$set(this.subIndex, spukey, -1);
				}
				this.checkInpath(spukey);
				//如果全部选完
				if (this.selectArr.every(item => item != '')) {
					this.selectshop = this.shopItemInfo[this.selectArr];
					this.selectNum = 1;
				}
			}
		},
		//循环所有属性判断哪些属性可选
		checkInpath(clickIndex) {
			//当前选中的兄弟节点和已选中属性不需要循环
			for (let i = 0, len = this.goodsData.spu.length; i < len; i++) {
				if (i == clickIndex) {
					continue;
				}
				let len2 = this.goodsData.spu[i].item.length;
				for (let j = 0; j < len2; j++) {
					if (this.subIndex[i] != -1 && j == this.subIndex[i]) {
						continue;
					}
					let choosed_copy = [...this.selectArr];
					this.$set(choosed_copy, i, this.goodsData.spu[i].item[j].name);
					let choosed_copy2 = choosed_copy.filter(item => item !== '' && typeof item !== 'undefined');
					if (this.shopItemInfo.hasOwnProperty(choosed_copy2)) {
						this.$set(this.goodsData.spu[i].item[j], 'ishow', true);
					} else {
						this.$set(this.goodsData.spu[i].item[j], 'ishow', false);
					}
				}
			}
			// console.log(this.goodsData.spu)
		},
		//计算有多小种可选路径
		checkItem() {
			let result = this.goodsData.sku.reduce(
				(arrs, items) => {
					return arrs.concat(
						items.difference.reduce(
							(arr, item) => {
								return arr.concat(
									arr.map(item2 => {
										//利用对象属性的唯一性实现二维数组去重
										if (!this.shopItemInfo.hasOwnProperty([...item2, item])) {
											this.shopItemInfo[[...item2, item]] = items;
										}
										return [...item2, item];
									})
								);
							},
							[[]]
						)
					);
				},
				[[]]
			);
		},
		//轮播图指示器
		swiperChange(e) {
			this.currentSwiper = e.detail.current;
		},
		// 弹出层
		showModal(name) {
			this.isChoice = '';
			// 滚动下分享
			if (name == 'share' && this.modalName != 'share') {
				setTimeout(() => {
					this.scrollAnimation = 0;
				}, 300);
			}
			this.modalName = name;
		},
		// 关闭弹出层
		hideModal(name) {
			if (name) {
				this.showModal(name);
			} else {
				this.modalName = null;
			}
		},
		// 分享回调
		wanlShare(e){
			if(e){
				this.$wanlshop.auth(`/pages/user/complaint/complaint?id=${this.goodsData.id}&type=1`);
			}else{
				this.modalName = null;
			}
		},
		//禁止父元素滑动
		moveHandle() {},
		// 关注 & 取消
		follow() {
			this.goodsData.follow = !this.goodsData.follow;
			// 全局控制中心
			if (this.goodsData.follow) {
				this.$store.commit('statistics/dynamic', {
					collection: this.$store.state.statistics.dynamic.collection + 1
				});
			} else {
				this.$store.commit('statistics/dynamic', {
					collection: this.$store.state.statistics.dynamic.collection - 1
				});
			}
			this.$api.post({
				url: '/wanlshop/product/follow',
				data: {
					id: this.goodsData.id
				},
				success: res => {
					this.goodsData.follow = res;
				}
			});
		},
		//跳转锚点
		toAnchor(index) {
			this.selectAnchor = index;
			uni.pageScrollTo({
				scrollTop: this.anchorlist[index].top,
				duration: 200
			});
		},
		//计算锚点高度
		calcAnchor() {
			let query = null;
			// 支付宝小程序不能加后面的.in(this)，是它自身的限制
			// #ifndef MP-ALIPAY
			query = uni.createSelectorQuery().in(this)
			// #endif
			// #ifdef MP-ALIPAY
			query = uni.createSelectorQuery()
			// #endif
			query.select('#details').boundingClientRect(rec => {
				this.anchorlist[1].top = rec.top - this.wanlsys.height - 45;
			}).exec();
			query.select('#recommend').boundingClientRect(rec => {
				this.anchorlist[2].top = rec.top - this.wanlsys.height - 45;
			}).exec();
		},
		// 打开购物车
		toCart() {
			uni.switchTab({ url: '/pages/cart/cart' });
		},
		productSearch(text) {
			this.$wanlshop.to(`/pages/product/search?keywords=${text}`, 'fade-in', 100);
		},
    previewImage(path){
      // 预览图片
      uni.previewImage({
        urls: [path],
        longPressActions: {
          itemList: ['发送给朋友', '保存图片', '收藏'],
          success: function(data) {
            console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
          },
          fail: function(err) {
            console.log(err.errMsg);
          }
        }
      });
    },
    openCityPicker(){
      this.$refs.cityPicker.show() // 显示
    },
    cityConfirm(e){
      var value = e.value
      var valueName = []
      for(var i=0;i<value.length;i++){
        if (!(i !== 0 && e.item[i].name === "全部")){
          valueName.push(e.item[i].name)
        }
      }
      this.distributorsFrom.area = valueName.join('/')
    },
	}
};
</script>

<style lang="scss" scoped>
toast,
uni-toast {
	z-index: 9999;
}
.cu-custom .cu-bar .search-form {
	background-color: #fff;
}

.cu-custom .cu-bar {
	background-color: #f3f3f3;
}

.cu-custom .bar-bg {
	background-color: rgba(243, 243, 243, 0.96);
}
.cu-custom .cu-bar {
	z-index: 99;
}
/* #ifdef MP */
.cu-custom .cu-bar .search-form {
	margin: 0 0 0 25rpx;
}
/* #endif */

.cu-custom .cu-bar .nav .cu-item{
	line-height: 70rpx;
	height: 70rpx;
}
.swiper-box {
	position: relative;
	width: 100%;
	height: 100vw;
}

.swiper-box swiper {
	width: 100%;
	height: 100vw;
}

.swiper-box swiper swiper-item image {
	width: 100%;
	height: 100vw;
}

.swiper-box .indicator {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 25upx;
	height: 40upx;
	border-radius: 40upx;
	font-size: 22upx;
	position: absolute;
	bottom: 20upx;
	right: 20upx;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.2);
}
.tah-vip-red-left{
  border: 1rpx red solid;
  color: red;
  line-height: 32rpx;
  background-color: white
}
.tah-vip-red-right{
  background-color: red;
  color: white;
}

.tah-vip-gray-left{
  margin-right: 0;
  border: 1rpx gray solid;
  color: gray;
  background-color: white
}
.tah-vip-gray-right{
  background-color: gray;
  color: white;
}

.tah-base{
  padding: 0 7rpx !important;
  height: 36rpx  !important;
  font-size: 22rpx  !important;
  line-height: 36rpx  !important;
}
::v-deep.uni-data-checklist .checklist-group .checklist-box.is--tag{
  padding: 20rpx 35rpx !important;
}
::v-deep.uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text {
  font-size: 32rpx;
}
</style>
